<template>
  <div class="tech01">
    <h3>name = {{ name }} age = {{ age }}</h3>
    <h3>person = {{ person }}</h3>
    <div>
      <h3>zhaoliu = {{ zhaoliu }}</h3>
      <span v-show="zhaoliu.name">zhaoliu.name = {{ zhaoliu.name }}</span><br>
      <span v-show="zhaoliu.age"> zhaoliu.age = {{ zhaoliu.age }}</span><br>
      <span v-show="zhaoliu.sex">zhaoliu.sex = {{ zhaoliu.sex }}</span><br>
    </div>
    <button @click="addInfo">添加</button>
    <button @click="changeInfo">改变</button>
    <button @click="deleteInfo">删除</button>
  </div>
</template>

<script >

import { ref, reactive, watch, watchEffect } from "vue";

export default {
  name: "TechWatch",
  setup(a, b, c, d) {
    //#region

    let name = ref('张三')
    // let name = '张三'
    let age = ref(18)

    let person = ref({
      name: "王五",
      age: 20,
      job: {
        company: {
          name: "tojoy"
        }
      }
    })

    let zhaoliu = reactive({
      name: "赵六",
      age: 20
    })

    let person2 = reactive({
      name: "赵六",
      age: 20,
      job: {
        company: {
          name: "tojoy"
        }
      }
    })

    watchEffect(() => {
      person2.age
      zhaoliu.sex
      console.log("watchEffect ")
    })

    // 单个属性
    watch(age, (newValue, oldValue) => {
      console.log("watch age", newValue, oldValue)
    })

    watch(person.value, (newValue, oldValue) => {
      console.log("watch person", newValue, oldValue)
    })

    // 多个变量
    watch([age, zhaoliu], (newValue, oldValue) => {
      console.log("watch age and zhaoliu", newValue, oldValue)
    })

    // 变量 deep 配置无效，但能监视
    // oldValue无法获取到old值，只能获取到新值，person2是reactive对象
    watch(person2, (newValue, oldValue) => {
      console.log("watch person2", newValue, oldValue)
    }, { deep: false })

    // 变量 deep 配置有效的，person是ref对象
    watch(person, (newValue, oldValue) => {
      console.log("watch person2", newValue, oldValue)
    }, { deep: true })

    // 如果监视的是person2.company 是有效的 depp 监视的是对象非基本类型
    watch(person2.job, (newValue, oldValue) => {
      console.log("watch person2.job", newValue, oldValue)
    }, { deep: false })


    // 监视响应式中的某一个属性
    watch(() => person2.age, (newValue, oldValue) => {
      console.log("watch  zhaoliu.age", newValue, oldValue)
    })

    function changeInfo() {
      name.value = '里斯'
      console.log(name)
      person.value.age = 30
      console.log(person)

      zhaoliu.age = 30
      console.log(zhaoliu)
      console.log(a, b, c, d)

      person2.age = 90
    }

    function addInfo() {
      zhaoliu.sex = '男'
    }

    function deleteInfo() {
      delete zhaoliu.sex
    }

    return {
      name,
      age,
      changeInfo,
      person,
      zhaoliu,
      addInfo,
      deleteInfo
    }
  }
}

</script>

<style scoped>
@media (min-width: 1024px) {
  .tech01 {
    min-height: 100vh;
    align-items: center;
  }
}
</style>
